<template>
    <div class="container">
        <el-row>
            <el-col :span="12">
                <el-card shadow="hover">
                    <el-row>
                        <div class="user-info">
                            <div style="margin-right: 20px;">
                                <el-avatar :size="100" v-if="role == 2" :src="companyUrl"/>
                                <el-avatar :size="100" v-if="role == 3" :src="adminUrl"/>
                            </div>
                            <div class="user-info-cont">
                                <div class="user-info-name">昵称：{{nickName}}</div>
                                <div v-if="role == 2">账号类型：公司管理员</div>
                                <div v-if="role == 3">账号类型：系统管理员</div>
                                <span style="text-align: center">注册时间：{{createTime}}</span>
                            </div>
                        </div>
                    </el-row>
                    <el-row>
						<el-col :span="12">
							<div class="grid-content grid-con-1">
								<el-icon class="grid-con-icon">
									<User/>
								</el-icon>
								<div class="grid-cont-right" v-if="role == 3">
									<div class="grid-num">{{userCount}}</div>
									<div>总用户数</div>
								</div>
								<div class="grid-cont-right" v-if="role == 2">
									<div class="grid-num">{{housekeeperCount}}</div>
									<div>家政员数</div>
								</div>
							</div>
						</el-col>
						<el-col :span="12">
							<div class="grid-content grid-con-3">
								<el-icon class="grid-con-icon">
									<DocumentAdd/>
								</el-icon>
								<div class="grid-cont-right">
									<div class="grid-num">{{orderCount}}</div>
									<div>总订单数</div>
								</div>
							</div>
						</el-col>
                    </el-row>
					<el-row style="margin-top: 10px">
						<el-col :span="12">
							<div class="grid-content grid-con-2">
								<el-icon class="grid-con-icon">
									<Reading/>
								</el-icon>
								<div class="grid-cont-right">
									<div class="grid-num">{{demandCount}}</div>
									<div v-if="role == 3">需求数</div>
									<div v-if="role == 2">需求数(已接单)</div>
								</div>
							</div>
						</el-col>
						<el-col :span="12">
							<div class="grid-content grid-con-4"  v-if="role == 3">
								<el-icon class="grid-con-icon">
									<OfficeBuilding/>
								</el-icon>
								<div class="grid-cont-right">
									<div class="grid-num">{{companyCount}}</div>
									<div>总公司数</div>
								</div>
							</div>
							<div class="grid-content grid-con-4" v-if="role == 2">
								<el-icon class="grid-con-icon">
									<Loading/>
								</el-icon>
								<div class="grid-cont-right">
									<div class="grid-num">{{matchingDemandCount}}</div>
									<div>需求数(匹配中)</div>
								</div>
							</div>
						</el-col>
					</el-row>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card v-if="role == 3">
                    <schart class="schart" canvasId="bar" :options="options1" :key="updateKey"></schart>
                </el-card>
				<el-card v-if="role == 2">
					<schart class="schart" canvasId="bar2" :options="options5" :key="updateKey"></schart>
				</el-card>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-card>
                    <schart class="schart" canvasId="line" :options="options2" :key="updateKey"></schart>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card>
                    <schart class="schart" canvasId="pie" :options="options3" :key="updateKey"></schart>
                </el-card>
            </el-col>
        </el-row>
	</div>
</template>

<script setup lang="ts" name="basecharts">
    import Schart from 'vue-schart';
    import {getDataApi, getOrderDataApi} from "../api/index";
    import {ElLoading, ElMessage} from "element-plus";
    import {ref} from 'vue';
    import adminUrl from '../assets/img/robot.png';
    import companyUrl from '../assets/img/boy-3.png';

    const role = localStorage.getItem("role");
    const nickName = localStorage.getItem("nickName");
    const createTime = localStorage.getItem("createTime");
    const options1 = ref({
        type: 'bar',
        title: {
            text: '最近七天每日新增用户图'
        },
        bgColor: '#fbfbfb',
        labels: ['2023-04-06', '2023-04-07', '2023-04-08', '2023-04-09', '2023-04-10', '2023-04-11', '2023-04-12'],
        xRorate: 30,
        datasets: [
            {
                label: '用户新增数',
                fillColor: 'rgba(241, 49, 74, 0.5)',
                data: [0, 0, 0, 0, 0, 0, 0]
            },
        ]
    });
	const options5 = ref({
		type: 'bar',
		title: {
			text: '最近七天每日新增家政员图'
		},
		bgColor: '#fbfbfb',
		labels: ['2023-04-06', '2023-04-07', '2023-04-08', '2023-04-09', '2023-04-10', '2023-04-11', '2023-04-12'],
		xRorate: 30,
		datasets: [
			{
				label: '家政员新增数',
				fillColor: 'rgba(241, 49, 74, 0.5)',
				data: [0, 0, 0, 0, 0, 0, 0]
			},
		]
	});
    const options2 = ref({
        type: 'line',
        title: {
            text: '最近半年需求数/订单数趋势图'
        },
        bgColor: '#fbfbfb',
        labels: ['2022-11', '2022-12', '2023-01', '2023-02', '2023-03', '2023-04'],
        xRorate: 30,
		leftPadding: 100,
        datasets: [
            {
                label: '需求数',
                data: [0, 0, 0, 0, 0]
            },
            {
                label: '订单数',
                data: [1, 1, 1, 1, 1]
            }
        ]
    });
    const options3 = ref({
        type: 'pie',
        title: {
            text: '最近半年各类服务订单数饼状图'
        },
        legend: {
            position: 'left'
        },
        bgColor: '#fbfbfb',
        labels: ['清洁', '收纳整理', '保姆'],
        datasets: [
            {
                data: [0, 0, 0, 0, 0, 0, 0]
            }
        ]
    });
    const options4 = ref({
        type: 'ring',
        title: {
            text: '各类数据总数'
        },
        showValue: true,
        legend: {
            position: 'bottom',
            bottom: 40
        },
        bgColor: '#fbfbfb',
        labels: ['用户总数', '需求总数', '订单总数', '家政员总数', '公司总数'],
        datasets: [
            {
                data: [500, 500, 500]
            }
        ]
    });

    const updateKey = ref(0);
    const userCount = ref(0);
    const demandCount = ref(0);
    const companyCount = ref(0);
    const housekeeperCount = ref(0);
    const orderCount = ref(0);
    const matchingDemandCount = ref(0);


    const getData = async () => {
        const loading = ElLoading.service({
            lock: true,
            text: '加载中...',
            background: 'rgba(0, 0, 0, 0.7)',
        });
        try {
            const r1 = await getDataApi();
            if (!r1 || r1.code != 200) {
                ElMessage.error("数据获取失败");
            }
            const d1 = r1.data;
            const barData = d1.userData;
            const barLabel = d1.userLabel;
            const lineLabel = d1.demandLabel;
            const lineData1 = d1.demandData;
            const lineData2 = d1.orderData;
            const pieLabel = d1.typeLabel;
            const pieData = d1.typeData;
            const barData2 = d1.housekeeperData;
            const barLabel2 = d1.housekeeperLabel;
            userCount.value = d1.userCount;
            demandCount.value = d1.demandCount;
            companyCount.value = d1.companyCount;
            housekeeperCount.value = d1.housekeeperCount;
            matchingDemandCount.value = d1.matchingDemandCount;
            orderCount.value = d1.orderCount;

            options1.value.datasets[0].data = barData;
            options1.value.labels = barLabel;
			options5.value.datasets[0].data = barData2;
			options5.value.labels = barLabel2;
            options2.value.datasets[0].data = lineData1;
            options2.value.datasets[1].data = lineData2;
            options2.value.labels = lineLabel;
            options3.value.datasets[0].data = pieData;
            options3.value.labels = pieLabel;
			console.log(options5);
            updateKey.value += 1;
        } finally {
            loading.close();
        }
    };
    getData();
</script>

<style scoped>

    .user-info {
        display: flex;
        align-items: center;
        padding-bottom: 20px;
        border-bottom: 2px solid #ccc;
        margin-bottom: 20px;
    }

    .schart-box {
        display: inline-block;
        margin: 20px;
    }

    .schart {
        width: 100%;
        height: 50vh;
        /*height: 100%;*/
    }

    .content-title {
        clear: both;
        font-weight: 400;
        line-height: 50px;
        margin: 10px 0;
        font-size: 22px;
        color: #1f2f3d;
    }

    .grid-content {
        display: flex;
        align-items: center;
        height: 60px;
    }

    .grid-cont-right {
        flex: 1;
        text-align: center;
        font-size: 14px;
        color: #999;
    }

    .grid-num {
        font-size: 30px;
        font-weight: bold;
    }

    .grid-con-icon {
        font-size: 50px;
        width: 100px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        color: #fff;
    }

    .grid-con-1 .grid-con-icon {
        background: rgb(45, 140, 240);
    }

    .grid-con-1 .grid-num {
        color: rgb(45, 140, 240);
    }

    .grid-con-2 .grid-con-icon {
        background: rgb(100, 213, 114);
    }

    .grid-con-2 .grid-num {
        color: rgb(100, 213, 114);
    }

    .grid-con-3 .grid-con-icon {
        background: rgb(246, 150, 162);
    }

    .grid-con-3 .grid-num {
        color: rgb(246, 150, 162);
    }

    .grid-con-3 .grid-con-icon {
        background: rgb(246, 150, 162);
    }

    .grid-con-4 .grid-con-icon {
        background: rgb(245, 173, 54);
    }

    .grid-con-4 .grid-con-icon {
        background: rgb(245, 173, 54);
    }

    .grid-con-4 .grid-num {
        color: rgb(245, 173, 54);
    }
</style>
